<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改订单</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layuimini/lib/layui-v2.6.3/css/layui.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuimini/css/layuimini.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuimini/css/themes/default.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/login/phone/iconfont.css') }}">
    <style>
        body{
            padding: 10px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" style="display: flex">
    <div style="width: 550px">
        <i class="layui-icon layui-icon-next" style="color: orange;margin-left: 35px"></i>&nbsp;&nbsp;<span style="font-weight: bold">修改订单</span>
        <div class="layui-form-item" style="width: 200px;margin-top: 20px">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block" style="width: 300px;">
                <input type="text" name="oid" required  lay-verify="required" autocomplete="off" class="layui-input" value="{{ order.oid }}">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">收货人</label>
            <div class="layui-input-inline" style="margin-right: 0;width: 300px">
                <input type="text" id="bookname" name="name" required lay-verify="required" autocomplete="off" class="layui-input" value="{{ order.recv_name }}">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline" style="margin-right: 0;width: 300px">
                <input type="text" id="bookname" name="phone" required lay-verify="required" autocomplete="off" class="layui-input" value="{{ order.recv_phone }}">
            </div>
        </div>
        <div class="layui-form-item" style="width: 250px">
            <label class="layui-form-label">收获地址</label>
            <div class="layui-input-block" style="width: 300px;">
                <input type="text" name="address" required  lay-verify="required"  autocomplete="off" class="layui-input" value="{{ order.recv_province }}{{ order.recv_city }}{{ order.recv_area }}{{ order.recv_address }}">
            </div>
        </div>
        <div class="layui-form-item" style="width: 200px">
            <label class="layui-form-label">总价</label>
            <div class="layui-input-block" style="width: 100px;">
                <input type="text" name="bookprice" required  lay-verify="required" autocomplete="off" class="layui-input" value="{{ order.total_price }}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block" style="width: 200px;">
                <select name="booksort" id="booksort" lay-verify="required">
                    <option value="0" {% if order.status==0 %}selected{% endif %}>未支付</option>
                    <option value="1" {% if order.status==1 %}selected{% endif %}>待发货</option>
                    <option value="2" {% if order.status==2 %}selected{% endif %}>待收货</option>
                    <option value="3" {% if order.status==3 %}selected{% endif %}>已完成</option>
                </select>
            </div>
            <span id="testcase" style="display: none">{{ order.status }}</span>
        </div>
        <div class="layui-form-item" style="margin-top: 30px">
            <div class="layui-input-block">
                <button id="btn-submit" class="layui-btn" lay-submit lay-filter="btn-submit-filter">立即提交</button>
            </div>
        </div>
    </div>
    <div style="width: 680px;margin-left: 10px">
        <i class="layui-icon layui-icon-next" style="color: orange;margin-left: 35px"></i>&nbsp;&nbsp;<span style="font-weight: bold">订单详细</span>
        <div class="layui-form" style="height: 300px; overflow: auto;margin-top: 10px;margin-left: 35px">
            <div class="layui-form" style="height: 300px; overflow: auto;">
                <table class="layui-table" lay-even style="text-align: center">
                    <thead>
                        <tr>
                            <th style="text-align: center">商品名称</th>
                            <th style="text-align: center">商品图片</th>
                            <th style="text-align: center">商品价格</th>
                            <th style="text-align: center">数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in books %}
                            <tr>
                                <td>{{ item['title'] }}</td>
                                <td><img style='height: 70px' src="../../../static/image/detail/{{ item['bookname'] }}"></td>
                                <td>{{ item['price'] }}</td>
                                <td>{{ item['num'] }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>

<script src="{{ url_for('static',filename='layuimini/lib/layui-v2.6.3/layui.js') }}" charset="utf-8"></script>
<script>
    layui.use(['laydate','table','form','upload', 'element', 'layer'],function () {
        var laydate=layui.laydate;
        var table=layui.table;
        var form=layui.form;
        var $=layui.$;
        var upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //表单提交
        form.on('submit(btn-submit-filter)', function(data){
            $("#btn-submit").attr("disabled","disabled").addClass("layui-btn-disabled");
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //异步请求提交数据
            $.ajax({
                url:"/admin/changestatus",
                data:data.field,
                success:function (response) {
                    if(response.state==200){
                        //成功提示
                        layer.msg(response.message, {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            //刷新表格
                            parent.refreshTable();
                            //关闭窗口
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        });
                    }else {
                        $("#btn-submit").removeAttr("disabled","disabled").addClass("layui-btn-disabled");
                        layer.msg("修改失败！", {
                            icon: 2,
                            anim: 6
                        });
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>